<template>
	<view class="article-warp">
		<!-- 添加圈子信息 -->
		<view class="add-cicle" @click="addClick" v-if="searchShow">
			<img src="https://file.casugn.com/storecompcard//IsrwBq1acMwQb36a3e864f136d76694ec64c5b35f7a6_1658388912042.png"
				alt="">
		</view>
		<view class="article-box" v-for="(item,index) in articleList" :key="index" @tap="toBusinessInfo(item,index)">
			<view class="">
				<view class="article-company">
					{{item.companyName}}
				</view>
				<p class="article-title">{{item.title}}</p>

				<view class="img-arr" v-if="item.image.length==3">
					<img class="img-arr-img" v-for="(ele,index) in item.image" :key="index" :src="ele" alt="">
				</view>

				<!-- 	<view class="video-box" v-if="item.videoUrl">
					<video class="video-ctr" :src="item.videoUrl" :poster="item.posterImg" @tap.stop="videoClick(item,index)" controls></video>
				</view> -->

				<p class="article-subTitle-box">
					<!-- <text v-if="item.top" class="article-top">{{item.top}}</text> -->
					<!-- <text class="article-subTitle">{{item.subTitle}}</text> -->
					<text class="article-commentNum">{{item.visitNumber}}次浏览</text>
					<text class="article-dateTime">{{item.releaseTime}}</text>
				</p>
			</view>
			<view class="single-img" v-if="item.image.length!=3">
				<img :src="item.image[0]" alt="">
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ['searchTiTle'],
		watch: {
			searchTiTle: {
				handler(newName, oldName) {
					console.log(newName)

					this.title = newName
					this.searchShow = false
					this.getBusinessLists()


				},
				immediate: true,
				deep: true
			}

		},
		data() {
			return {
				searchShow: true,
				title: '', //标题
				province: '', //省
				city: '', //市
				district: '', //区
				startTime: '',
				endTime: '',
				// 文章数据列表
				articleList: [

				],
			}
		},
		onShow() {
			this.getBusinessLists()
		},
		methods: {
			// 获取商机列表
			getBusinessLists() {
				let data = {
					title: this.title,
					startTime: this.startTime,
					endTime: this.endTime,
					province: this.province,
					city: this.city,
					district: this.district,
				}
				this.$api.getBusinessList(data).then(res => {
					console.log(res)


					if (res.success) {
						// uni.showToast({
						// 	title:res.message,
						// 	icon: 'none'
						// });
						this.articleList = res.result
						this.articleList.forEach(item => {
							console.log(item.image)
							item.image = JSON.parse(item.image)
						})
					}
				})
			},
			// 添加商机
			addClick() {
				uni.navigateTo({
					url: '/pagesBusiness/business/addBusiness'
				})
			},
			// 跳转商品详情
			toBusinessInfo(item, index) {
				console.log(item, index)
				uni.setStorageSync('businessInfoId', item.id)
				uni.navigateTo({
					url: '/pagesBusiness/business/businessInfo'
				})
			},
			videoClick(item, index) {
				console.log(1)
			},
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.article-warp {
		padding: 10rpx 40rpx;
		position: relative;

		.add-cicle {
			position: fixed;
			width: 120upx;
			height: 120upx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 0upx 3upx 20upx 0upx rgba(65, 59, 243, 0.5000);
			border-radius: 50%;
			right: 30upx;
			bottom: 150upx;
			z-index: 10;

			img {
				width: 50upx;
				height: 50upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-25upx) translateY(-25upx);
			}
		}

		.article-box {
			margin-top: 30rpx;
			border-bottom: 1px solid rgba(122, 122, 122, 0.5);
			padding-bottom: 30rpx;
			display: flex;
			justify-content: space-between;

			.article-company {
				font-size: 24rpx;
				font-weight: blod;
				line-height: 30rpx;
			}

			.article-title {
				font-size: 32rpx;
				font-weight: 400;
				line-height: 50rpx;
			}

			.img-arr {
				display: flex;
				justify-content: space-around;
				margin-top: 10rpx;

				.img-arr-img {
					width: 200rpx;
					height: 150rpx;
					margin-left: 8upx;

				}
			}

			.video-box {
				text-align: center;
				margin-top: 10rpx;

				video {
					width: 660rpx;
					height: 400rpx;

				}
			}

			.single-img {
				img {
					width: 150rpx;
					height: 150rpx;
				}
			}
		}

		.article-subTitle-box {
			margin-top: 20rpx;

			.article-top {
				border: 1px solid rgb(244, 68, 70);
				border-radius: 5px;
				display: inline-block;
				width: 60rpx;
				text-align: center;
				color: rgb(244, 68, 70);
				font-size: 20rpx;
			}

			.article-subTitle {
				color: rgb(122, 122, 122);
				font-size: 25rpx;
				margin-left: 10rpx;
			}

			.article-commentNum {
				color: rgb(122, 122, 122);
				font-size: 25rpx;
				margin-left: 10rpx;
			}

			.article-dateTime {
				color: rgb(122, 122, 122);
				font-size: 25rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>
